<!--
 * @Author: 刘十三
 * @Date: 2023-12-28 14:56:27
 * @LastEditors: 刘十三
 * @LastEditTime: 2024-02-20 20:18:58
 * @FilePath: \NM-dev-1.3.1\dev\pages\internal\linkage\check\components\multiMemberQueryItem.vue
 * @Description: 内蒙多员联动 - 多员联动台账（组件）
-->

<template>
  <view class="item">
    <view class="list" @click="toTarget(sealInfo)">
      <view class="top-part">
        <view class="part-left">
          <view>
            <image class="img-size" src="/static/case/icon-item.png"></image>
            <text class="title-text">{{ sealInfo.code }}</text>
          </view>
        </view>
        <view class="part-right">
          <text class="part-right-draft" v-if="sealInfo.processStatusCode == '01'">新建</text>
          <text class="part-right-no" v-if="sealInfo.processStatusCode == '02'">审批中</text>
          <text class="part-right-yes" v-if="sealInfo.processStatusCode == '03'">审批结束</text>
          <text class="part-right-red" v-if="sealInfo.processStatusCode == '04'">已作废</text>
        </view>
      </view>
      <view class="center-part">
        <view class="feekback-date">反馈日期：{{ sealInfo.feedbackDate }}</view>
        <view class="feekback-person">
          <u-tag :text="`反馈人：${sealInfo.feedBackPerson}`" mode="light" type="primary" border-color="#ffffff"></u-tag>
        </view>
      </view>
      <view class="center-tag">
        <u-tag :text="`企业字号：${sealInfo.retatlerName}`" mode="light" type="info" border-color="#ffffff"></u-tag>
        <u-tag :text="`反馈类型：${sealInfo.categoryName}`" mode="light" type="info" border-color="#ffffff"></u-tag>
      </view>
      <view class="bottom-part">
        <view class="item-reason u-line-3">
          <text>反馈内容：</text>
          {{ sealInfo.content || "/" }}
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  name: "memberLinkageListPage",
  props: {
    sealInfo: {
      type: Object,
      required: () => {},
    },
  },
  data() {
    return {};
  },
  methods: {
    // 查看
    toTarget(row) {
      // this.setRouteParam(row);
      // this.$u.route({
      //   url: "/pages/internal/linkage/check/multiMemberDetail",
      //   type: "to",
      // });
      let self = this;
      self.setRouteParam({ bizUuid: row.taskId, status: "view" });
      self.$u.route({
        url: "/pages/internal/linkage/todo/inspectionArrangement",
        type: "to",
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.item {
  padding: 0px 12rpx;
  .top-part {
    display: flex;
    justify-content: space-between;
    .img-size {
      width: 32rpx;
      height: 36rpx;
      vertical-align: middle;
    }
    .title-text {
      vertical-align: middle;
      font-weight: 600;
      font-size: 32rpx;
      margin: 0rpx 20rpx;
    }
    .part-right {
      flex: none;
      font-size: 28rpx;
      font-weight: 600;
    }
    .part-right-draft {
      color: $u-type-info;
    }
    .part-right-no {
      color: $u-type-warning;
    }
    .part-right-yes {
      color: $u-type-success;
    }
    .part-right-red {
      color: red;
    }
  }
  .center-part {
    display: flex;
    align-items: center;
    padding-top: 16rpx;
    justify-content: space-between;
    .feekback-date {
      color: $u-type-info-dark;
      font-size: 26rpx;
      font-family: "微软雅黑", sans-serif;
    }
  }
  .center-tag {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-start;
    flex-grow: 1;
    align-items: top;
    margin-top: 16rpx;
    font-size: 24rpx;

    :nth-child(n) {
      margin: 5rpx 0;
    }

    :first-child {
      margin-right: 16rpx;
    }
  }
  .bottom-part {
    padding-top: 16rpx;
  }
  .center-bottom {
    .item-reason {
      color: $uni-text-color;
      font-size: 28rpx;
      padding-bottom: 8px;
      font-family: "微软雅黑", sans-serif;
      uni-text {
        color: $cm-form-right-icon-color;
      }
    }
  }
}
</style>
